import 'package:flutter/material.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

typedef Callback = void Function(String value);

class BarCode extends StatefulWidget {
  final Callback? callback;

  const BarCode({Key? key, this.callback}) : super(key: key);

  @override
  State<BarCode> createState() => _BarCodeState();
}

class _BarCodeState extends State<BarCode> {
  String num = '';

  late TextEditingController controller;

  @override
  void initState() {
    super.initState();
    controller = ToolsUtils.editingController(num);
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          height: 300,
          decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(Sizes.default15),
                  topRight: Radius.circular(Sizes.default15))),
          child: Column(
            children: [
              Container(
                height: Sizes.default50,
                width: double.maxFinite,
                padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    TextButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        child: Text(
                          '取消',
                          style: StylesUtils.customTextStyle(
                              fontSize: Sizes.default16, color: ColorsUtils.color333),
                        )),
                    TextButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                          Future.delayed(const Duration(milliseconds: 20), () {
                            widget.callback!.call(num);
                          });
                        },
                        child: Text(
                          '确定',
                          style: StylesUtils.customTextStyle(
                              fontSize: Sizes.default16, color: ColorsUtils.colorFf6),
                        ))
                  ],
                ),
              ),
              Container(
                  height: Sizes.default50,
                  width: double.maxFinite,
                  alignment: Alignment.center,
                  child: Container(
                    width: 300,
                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(Sizes.default10)),
                    child: TextField(
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color363, fontSize: Sizes.default15),
                      readOnly: true,
                      decoration: InputDecoration(
                          border: const OutlineInputBorder(
                            borderSide: BorderSide.none,
                          ),
                          isCollapsed: true,
                          filled: true,
                          fillColor: ColorsUtils.rgba(247, 247, 247, 1),
                          contentPadding: const EdgeInsets.symmetric(
                              horizontal: Sizes.default10, vertical: Sizes.default10),
                          constraints: const BoxConstraints(minHeight: Sizes.default50),
                          hintText: '请输入条形码',
                          hintStyle: StylesUtils.customTextStyle(
                              fontSize: Sizes.default14, color: ColorsUtils.color999)),
                      keyboardType: TextInputType.number,
                      controller: controller,
                    ),
                  )),
              Container(
                height: Sizes.default50,
                decoration: BoxDecoration(
                    border: Border(
                        top: BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                child: Row(
                  children: [
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            setState(() {
                              changePwd('1');
                            });
                          },
                          child: Text(
                            '1',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Container(
                      decoration: BoxDecoration(
                          border: Border(
                              left:
                                  BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')),
                              right: BorderSide(
                                  color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                      child: TextButton(
                          onPressed: () {
                            changePwd('2');
                          },
                          child: Text(
                            '2',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            changePwd('3');
                          },
                          child: Text(
                            '3',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                  ],
                ),
              ),
              Container(
                height: Sizes.default50,
                decoration: BoxDecoration(
                    border: Border(
                        top: BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                child: Row(
                  children: [
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            changePwd('4');
                          },
                          child: Text(
                            '4',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Container(
                      decoration: BoxDecoration(
                          border: Border(
                              left:
                                  BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')),
                              right: BorderSide(
                                  color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                      child: TextButton(
                          onPressed: () {
                            changePwd('5');
                          },
                          child: Text(
                            '5',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            changePwd('6');
                          },
                          child: Text(
                            '6',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                  ],
                ),
              ),
              Container(
                height: Sizes.default50,
                decoration: BoxDecoration(
                    border: Border(
                        top: BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                child: Row(
                  children: [
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            changePwd('7');
                          },
                          child: Text(
                            '7',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Container(
                      decoration: BoxDecoration(
                          border: Border(
                              left:
                                  BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')),
                              right: BorderSide(
                                  color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                      child: TextButton(
                          onPressed: () {
                            changePwd('8');
                          },
                          child: Text(
                            '8',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            changePwd('9');
                          },
                          child: Text(
                            '9',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                  ],
                ),
              ),
              Container(
                height: Sizes.default50,
                decoration: BoxDecoration(
                    border: Border(
                        top: BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                child: Row(
                  children: [
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {},
                          child: Text(
                            '',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Container(
                      decoration: BoxDecoration(
                          border: Border(
                              left:
                                  BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')),
                              right: BorderSide(
                                  color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                      child: TextButton(
                          onPressed: () {
                            changePwd('0');
                          },
                          child: Text(
                            '0',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            setState(() {
                              if (num.isNotEmpty) {
                                num = num.substring(0, num.length - 1);
                                controller.text = num;
                              } else {
                                controller.text = '';
                              }
                            });
                          },
                          child: Text(
                            '删除',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default18),
                          )),
                    )),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void changePwd(String s) {
    setState(() {
      num += s;
      controller.text = num;
    });
  }
}
